<template>
	<el-drawer title="配置菜单" :visible.sync="visible" size="360px" append-to-body>
		<div class="sw_menu_container" v-loading="loading">
			<el-tree v-bind="treeConfig" :data="grantMenu" :default-checked-keys="defaultChecked"></el-tree>
			<div class="button">
				<el-button size="small" @click="visible = false">取消</el-button>
				<el-button size="small" type="primary" :loading="btnLoading" @click="handleUpdateGrant">确定</el-button>
			</div>
		</div>
	</el-drawer>
</template>

<script>
import { mapGetters } from 'vuex';
import { getMenuByRole, updateRoleMenu } from '@/api/system/tbSysRole';
export default {
	props: {
		value: { type: Boolean, default: false },
		data: { type: Object, default: () => {} }
	},
	data() {
		return {
			loading: false,
			visible: this.value,
			grantMenu: [],
			treeConfig: {
				ref: 'tree',
				nodeKey: 'id',
				showCheckbox: true,
				checkStrictly: true,
				defaultExpandAll: true,
				checkOnClickNode: true,
				expandOnClickNode: false,
				props: { label: 'name', children: 'children' }
			},
			defaultChecked: [],
			btnLoading: false
		};
	},
	computed: {
		...mapGetters(['userInfo']),
		roleId() {
			return this.data.id;
		},
		roleType() {
			return this.data.type;
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.loading = true;
			this.grantMenu = [];
			this.defaultChecked = [];
			this.getGrantMenuData();
		}
	},
	methods: {
		//获取授权菜单
		async getGrantMenuData() {
			let result = await getMenuByRole(this.roleId).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				let datas = result.data || [];
				let allMenus = this.$treeToFlat(datas, 'childList');
				this.defaultChecked = allMenus.filter((n) => !!n.checked).map((n) => n.id);
				this.$nextTick(async () => {
					this.grantMenu = await this.getRoleTypeMenu(allMenus);
				});
			}
		},

		//按照角色类型获取菜单
		async getRoleTypeMenu(arr) {
			let filterMenu = [...arr];
			if (this.userInfo.account !== 'admin') {
				filterMenu = arr.filter((n) => n.style === '0' || n.style === this.roleType);
			}
			return Promise.resolve(this.$flatToTree(filterMenu, 'pid'));
		},

		//提交授权变化
		async handleUpdateGrant() {
			let params = { roleId: this.roleId };
			let curChecked = this.$refs['tree'].getCheckedKeys();
			let diffChecked = this.$getArrDifference(curChecked, this.defaultChecked);
			params['menuList'] = diffChecked.map((item) => {
				let obj = { relId: item };
				obj['operType'] = !this.defaultChecked.includes(item) ? '1' : '2';
				return obj;
			});
			this.btnLoading = true;
			this.updateGrantRequest(params);
		},

		//授权变化请求
		async updateGrantRequest(params) {
			let result = await updateRoleMenu(params).then((res) => res.data);
			this.btnLoading = false;
			if (result.code === '0') {
				this.$showCustomMessage('success', `更新授权成功`);
				this.$store.dispatch('getPermissionMenu');
				this.visible = false;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.sw_menu_container {
	display: flex;
	flex-direction: column;
	height: 100%;
	.el-tree {
		flex: 1;
		padding: 8px 0;
		overflow: auto;
	}
	&:deep(.el-tree-node__content) {
		height: 32px;
	}
	&:deep(.el-tree-node__label) {
		line-height: 1;
		user-select: none;
	}
	.button {
		padding: 16px;
		flex-shrink: 0;
		text-align: right;
		border-top: solid 1px #dcdfe6;
	}
}
</style>
